<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="">
  <style>
    .content {
      width: 590px;
      height: 470px;
      margin: 100px 470px;
      position: relative;
    }

    .imglist {
      padding-left: 0px;
      list-style: none;
      width: 590px;
      height: 470px;
      position: relative;
    }

    .item {
      position: absolute;
      width: 100%;
      height: 100%;
      color: white;
      opacity: 1;
      transition: all 1s;
    }

    .item:nth-child(1) {

      background-image: url("img/j1.jpg");

      background-size: 590px 470px;
    }

    .item:nth-child(2) {
      background-image: url("img/j2.jpg");
      background-size: 590px 470px;
    }

    .item:nth-child(3) {
      background-image: url("img/j3.jpg");
      background-size: 590px 470px;
    }

    .item:nth-child(4) {
      background-image: url("img/j4.jpg");
      background-size: 590px 470px;
    }

    .item:nth-child(5) {
      background-image: url("img/j5.jpg");
      background-size: 590px 470px;
    }

    .item.active {
      opacity: 1;
      z-index: 10;
    }

    .btn {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 200px;
      z-index: 15;
      opacity: 50%;
      border-radius: 30%;
      border: white dashed;
    }

    #goPre {
      left: 0px;
    }

    #goNext {
      right: 0PX
    }

    .pointlist {
      position: absolute;
      list-style: none;
      margin-left: 30px;
      left: 20px;
      bottom: 15px;
      z-index: 20;
    }

    .point {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.4);
      margin: 0px 4px 0px 0px;
      float: left;
      border: 2px solid transparent;
      background-clip: content-box;
      cursor: pointer;
    }

    .point.active {
      background-color: white;
      border: 2px solid rgba(255, 255, 255, 0.4);
    }

  </style>
</head>
<body>

<div class="content">
  <ul class="imglist">
    <li class="item active"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>

  </ul>
  <button type="button" class="btn" id="goPre"><</button>
  <button type="button" class="btn" id="goNext">></button>


  <div class="pointlist">
    <li class="point active" data-index="0"><a href="#"/></li>
    <li class="point" data-index="1"></li>
    <li class="point" data-index="2"></li>
    <li class="point" data-index="3"></li>
    <li class="point" data-index="4"></li>


  </div>
</div>
<script>
  //获取以上各个对象
  var items = document.getElementsByClassName('item');
  var points = document.getElementsByClassName('point');
  var goPreBtn = document.getElementById('goPre');
  var goNextBtn = document.getElementById('goNext');
  //index是每一张图的下标，也可以说是指每一张图
  var index = 0;
  var time = 0;
  //把每一张图的class设置为’item‘，也就是让每一张图都不活跃的方法。
  var clearActive = function () {
    for (var i = 0; i < items.length; i++) {
      items[i].className = 'item';

    }
    //把每一个点都设置为‘point’，也就是让每一个点的下标都不活跃的方法。
    for (var i = 0; i < points.length; i++) {
      points[i].className = 'point';
    }
  }

  var goIndex = function () {
    //调用清空方法。
    clearActive();
    //设置当前图片和点为活跃状态。
    points[index].className = 'point active';
    items[index].className = 'item active';

  }
  //next方法，跳转到下一页的方法。
  var goNext = function () {
    if (index < 4) {
      index++
    } else {
      index = 0;
    }
    //把index传入goindex方法中，使下一张图和点的状态为活跃。
    goIndex();
  }
  //pre方法，跳转到上一页的方法。
  var goPre = function () {
    if (index === 0) {
      index = 4;
    } else {
      index--;
    }
    //把index传入goindex方法中，使上一张图和点的状态为活跃。
    goIndex();
  }
  //添加点击事件，跳转到下一张图
  goNextBtn.addEventListener('click', function () {
    goNext();
    time = 0;
  })
  //添加点击事件，跳转到上一张图
  goPreBtn.addEventListener('click', function () {
    goPre();
    time = 0;
  })
  for (var i = 0; i < points.length; i++) {
    //点的点击事件
    points[i].addEventListener('click', function () {
      //getAttribute获取每个点的下标值，
      var pointIndex = this.getAttribute('data-index');
      //把当前下标值赋值给index，在执行goindex方法就可以跳转到指定页面。
      index = pointIndex;
      goIndex();
      time = 0;
    })
  }
  //以上时间time，只要页面跳转就把时间清零。
  setInterval(function () {
    //每过0.1秒，time+1，过了两秒后，执行next方法，time时间清零。
    time++;
    if (time === 20) {
      goNext();
      time = 0;
    }
  }, 100)
</script>
</body>
</html>
